import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLL_OFFSET = 100;

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imagesUrls = [
    // 'assets/webp/mqdefault_6s_480x270.webp',
    // 'assets/webp/mqdefault_6s_480x270.webp',
    // // 'assets/webp/mqdefault_6s.webp',
    // 'assets/webp/mqdefault_6t.webp',
  ];

  double appBarAlpha = 0;

  TextStyle bold24Roboto = TextStyle(
    color: Colors.white,
    fontSize: 24,
    fontWeight: FontWeight.w900,
  );

  void _onScroll(offset) {
    double alpha = offset / APPBAR_SCROLL_OFFSET;
    // 补偿
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    setState(() {
      appBarAlpha = alpha;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff2f2f2),
      body: Stack(
        children: <Widget>[
          // 移除ListView距离屏幕顶端的边距
          MediaQuery.removeViewPadding(
            context: context,
            removeTop: true,
            child: NotificationListener(
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollUpdateNotification &&
                    // 判断仅当垂直滑动的时候监听
                    scrollNotification.depth == 0) {
                  _onScroll(scrollNotification.metrics.pixels);
                  return true;
                }
                return false;
              },
              child: ListView(
                children: <Widget>[
                  // Container(
                  //   height: 200,
                  //   child: Swiper(
                  //     itemCount: _imagesUrls.length,
                  //     pagination: new SwiperPagination(
                  //         alignment: Alignment.bottomRight),
                  //     autoplay: true,
                  //     itemBuilder: (BuildContext context, int index) {
                  //       return Image.asset(
                  //         _imagesUrls[index],
                  //         fit: BoxFit.fill,
                  //       );
                  //     },
                  //   ),
                  // ),
                  Container(
                    child: Center(
                      child: Container(
                        child: Text(
                          "Supreme",
                          style: bold24Roboto,
                        ),
                        decoration: BoxDecoration(
                          color: Colors.red[400],
                        ),
                        padding: EdgeInsets.all(16),
                        width: 240,
                      ),
                    ),
                    height: 600,
                    width: 300,
                    color: Colors.grey[400],
                  )
                ],
              ),
            ),
          ),
          Opacity(
            opacity: appBarAlpha,
            child: Container(
              height: 80,
              decoration: BoxDecoration(color: Colors.pink[200]),
              child: Center(
                child: Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Text('首页'),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}
